<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { useScrollTransparentNavbar } from '@/hooks'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config.js'

const paging = ref(null)
useZPaging(paging)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const state = reactive({
  circlesId: 0,
  lists: [],
})

const queryList = (pageNo: number, pageSize: number) => {
  circles
    .topupDynamicLists({
      page: pageNo,
      page_size: pageSize,
      circles_id: state.circlesId,
    })
    .then((res) => {
      paging.value.complete(res.data)
    })
    .catch((err: any) => {
      console.log(err, 'lists')
      paging.value.complete(false)
    })
}

const cancelTopupDynamic = (circlesPostId: number) => {
  circles
    .cancelTopupDynamic({
      circles_post_id: circlesPostId,
      circles_id: state.circlesId,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        paging.value.reload(true)
      }
    })
    .catch((err: any) => {
      console.log(err, 'cancelTopupDynamic')
    })
}

const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}
onLoad((options) => {
  if (!options?.circlesId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.circlesId = options.circlesId
})
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      置顶管理
    </TnNavbar>
    <view class="container">
      <z-paging
        ref="paging"
        v-model="state.lists"
        :paging-style="{ paddingTop: `${navbarHeight + 10}px` }"
        :safe-area-inset-bottom="true"
        :use-safe-area-placeholder="true"
        @query="queryList"
      >
        <view class="tn-mt-sm">
          <view class="">
            <view
              v-for="(item, index) in state.lists"
              :key="index"
              class="list-item tn-shadow"
            >
              <view class="item-info">
                <view
                  class="info-detail"
                  @click="navCirclesPostDetailPage(item.id)"
                >
                  <view class="title tn-text-ellipsis-2">
                    <TnTag shape="round" type="warning">
                      {{ item.top_date }}
                    </TnTag>
                    {{ item.content }}
                  </view>
                </view>
                <view class="info-data">
                  <view class="count-data">
                    <view class="count-item">
                      <view class="icon">
                        <TnButton
                          type="primary"
                          plain
                          shape="round"
                          border-color="#080808"
                          text-color="#080808"
                          @click="cancelTopupDynamic(item.id)"
                        >
                          取消置顶
                        </TnButton>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="item.attachment_type == 'image'" class="item-image">
                <image
                  class="tn-image"
                  :src="FILE_URL + item.attachment"
                  mode="aspectFill"
                />
              </view>
            </view>
          </view>
        </view>
      </z-paging>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.list-item {
  position: relative;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 30rpx;
  background-color: #fff;
  display: flex;

  .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 8rpx;
    height: 160rpx;

    .info-detail {
      .title {
        // font-size: 26rpx;
        // color: var(--tn-color-gray);
      }
    }

    .info-data {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1;

      .tag-data {
        font-size: 24rpx;
        background-color: var(--tn-color-gray-light);
        color: var(--tn-color-grey);
        padding: 10rpx 20rpx;
        transform: scale(0.8);
        transform-origin: left center;
      }

      .count-data {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: var(--tn-color-gray);
        margin-top: 6rpx;

        .count-item {
          display: flex;
          align-items: center;

          .data {
            margin-left: 4rpx;
          }

          & + .count-item {
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  .item-image {
    flex-grow: 0;
    flex-shrink: 0;
    width: 160rpx;
    height: 160rpx;
    border-radius: 6rpx;
    margin-left: 16rpx;
  }
}
</style>
